import React, { memo } from "react"
import type { ReactNode } from "react"
import { Link, useNavigate } from "react-router-dom"
import type { HotRecommendItme } from "@/views/Discover/c-views/Recommend/api/type"
import "./index.less"
import { formatImageUrl, formatCount } from "@/utils/format"
interface Iprops {
	children?: ReactNode
	song: HotRecommendItme
	size: number
}

const SongItem: React.FC<Iprops> = (props) => {
	const { song, size } = props
	const navgate = useNavigate()
	const jump = () => {
		navgate("/my")
	}
	return (
		<div className="songContainer" onClick={jump} style={{ width: `${size}px` }}>
			<div className="top">
				<img src={formatImageUrl(song.picUrl, 140)} width={size} height={size} alt="" />
				<div className="cover">
					<div className="info">
						<span>
							<i className="sprite_icon headset"></i>
							<span className="count">{formatCount(song.playCount)}</span>
						</span>
						<i className="sprite_icon play"></i>
					</div>
				</div>
			</div>
			<div className="bottom">
				<Link to="/">{song.name}</Link>
			</div>
		</div>
	)
}

export default memo(SongItem)
